<!-- ----------------------------------------------------------物资采购表------------------------------------- -->
<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="货物名称" prop="name">
        <el-input v-model="formInline.cargoName" placeholder="货物名称"></el-input>
      </el-form-item>
      <el-form-item label="材质" prop="Typename">
        <el-select v-model="formInline.textureID" placeholder="全部">
          <el-option label="金属" value="C4B257EC-15AC-64AF-8581-8A86A6355041"></el-option>
          <el-option label="橡胶" value="EF19EE03-63AC-923E-4EC0-F53864FAF4DA"></el-option>
          <el-option label="塑料" value="B8A7DAB5-FBCB-380C-EA08-84A67B6BA2FA"></el-option>
          <el-option label="液体" value="F18A8F75-885B-6020-41F1-83869AD88184"></el-option>
          <el-option label="纸质" value="FAE70E35-24D4-7995-6670-F8BE2774E517"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产地" prop="addr">
        <el-select
          v-model="formInline.addrID"
          placeholder="请选择地址"
          style="float: left"
        >
          <el-option label="中国" value="11639B30-862A-C011-F89C-B4DEB460A3F8"></el-option>
          <el-option label="美国" value="49B3FF3C-8B9E-B36D-E521-731623D99D84"></el-option>
          <el-option label="俄罗斯" value="16A2BC18-D2FD-A141-29D4-96ECEA43EEBD"></el-option>
          <el-option label="法国" value="E0133E44-FE4B-064B-DD13-40345488B650"></el-option>
          <el-option label="德国" value="3579431F-3C46-29EE-838E-47C4BF60324A"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请人" prop="person">
        <el-input v-model="formInline.proposer" placeholder="申请人"></el-input>
      </el-form-item>
      <el-form-item label="审批状态" prop="state">
        <el-select v-model="formInline.isState" placeholder="全部">
          <el-option label="待审批" value="1"></el-option>
          <el-option label="待提交" value="2"></el-option>
          <el-option label="已通过" value="3"></el-option>
          <el-option label="已拒绝" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitSelect">查询</el-button>
      </el-form-item>
       <el-form-item>
        <el-button type="success" @click="TJCollectionFrom" icon="el-icon-edit">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="SCCollectionFrom" icon="el-icon-edit">删除</el-button>
      </el-form-item>
    </el-form>
    
    <el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="cargoName" label="货物名称"></el-table-column>
      <el-table-column prop="typeName" label="类型"></el-table-column>
      <el-table-column prop="textureName" label="材质"></el-table-column>
      <el-table-column prop="skuName" label="规格"></el-table-column>
      <el-table-column prop="space" label="产地" ></el-table-column>
      <el-table-column prop="number" label="数量"></el-table-column>
      <el-table-column prop="useInfo" label="用途描述"></el-table-column>
      <el-table-column prop="proposer" label="申请人"></el-table-column>
      <el-table-column prop="expectTime" label="期望交付日期" type="date"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" ></el-table-column>
      <el-table-column prop="isState" label="状态" :formatter="statusText"></el-table-column>
      <el-table-column prop="approver" label="审批人"></el-table-column>
      <el-table-column label="操作" width="350">
        <template slot-scope="scope" v-if="scope.row.isState==4">
          <el-button size="mini" type="primary" @click="EditGoods(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteGoods(scope.row.id)">删除</el-button>
          <el-button size="mini" type="primary" @click="CKGoods(scope.row.id)">查看</el-button>
          <el-button size="mini" type="primary" @click="TrueGoods(scope.row.id)">重新提交</el-button>
        </template>
        <template slot-scope="scope" v-if="scope.row.isState==2">
          <el-button size="mini" type="primary" @click="EditGoods(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteGoods(scope.row.id)">删除</el-button>
          <el-button size="mini" type="primary" @click="CKGoods(scope.row.id)">查看</el-button>
          <el-button size="mini" type="primary" @click="FalseGoods(scope.row.id)">提交审批</el-button>
        </template>
        <template slot-scope="scope" v-if="scope.row.isState==1 || scope.row.isState==3">
          <el-button size="mini" type="primary" @click="EditGoods(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteGoods(scope.row.id)">删除</el-button>
          <el-button size="mini" type="primary" @click="CKGoods(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="PaIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="PaSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      PaIndex: 1,
      PaSize: 5,
      total: 0,
      formInline:
      {
        cargoName: '',
        proposer: '',
        textureID: '',
        isState: '',
        addrID: '',
      },
    };
  },
  //Space
  created: function () {
    this.axios
      .get("https://localhost:44331/api/app/cargo_Information", {
        params: { PageIndex: this.PaIndex, PageSize: this.PaSize},
      })
      .then((res) => {
        (this.tableData = res.data.items),
          (this.total = res.data.totalCount);
      });
  },
  methods: {
    statusText: function (row, column, cellValue, index) {
      if (row.isState == 1) {
        return "待审批";
      } else if(row.isState == 2) {
        return "待提交";
      }else if(row.isState == 3) {
        return "已通过";
      }else if(row.isState == 4) {
        return "已拒绝";
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.axios
        .get("https://localhost:44331/api/app/cargo_Information", {
          params: { PageIndex: this.paIndex, PageSize: val },
        })
        .then(
          (res) => {
            (this.tableData = res.data.items),
            (this.total = res.data.totalCount)
          }
        );
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.axios
        .get("https://localhost:44331/api/app/cargo_Information", {
          params: { PageIndex: val, PageSize: this.PaSize },
        })
        .then(
          (res) => {
            (this.tableData = res.data.items),
            (this.total = res.data.data.totalCount)
          }
        );
    },
    //删除
    deleteGoods(scope) {
      this.$confirm("是否将此操作放入回收站?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.axios
          .post(
            "https://localhost:44331/api/app/cargo_Information/del-cargo/" + scope.row.id
          )
          .then((res) => {
            if (res.data.Code == 200) {
              this.$message({
                type: "success",
                message: "回收成功",
                $router: push("/Show/Cargo_Information"),
              });
            } else {
              this.$message.error("回收失败，请先删除该类别的所有子类");
            }
          });
      });
    },
    //查询
    onSubmitSelect(formInline) {
      
      this.axios
        .get("https://localhost:44331/api/app/cargo_Information?name=" +
            this.formInline.cargoName +
            "&Typename=" +
            this.formInline.textureID +
            "&addr=" +
            this.formInline.addrID +
            "&person=" +
            this.formInline.proposer+ 
            "&state=" +
            this.formInline.isState
        )
        .then((res) => {
          this.tableData = res.data.items;
          this.total = res.data.totalCount;
        });
    },
    //添加
    TJCollectionFrom() {
      this.$router.push("/Create/Cargo_InformationCreate");
    },
    //批量删除
    SCCollectionFrom(rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //循环获取要删除的Id并存进数组中
          rows.forEach((element) => {
            this.ids.push(element.registrationID);
          });
          //删除ID数组
          var num = JSON.stringify(this.ids).substring(
            1,
            JSON.stringify(this.ids).length - 1
          ); //装换成json格式在截取
          console.log(num);
          //Ajax执行删除
          this.axios({
            url:
              "https://localhost:44331/api/app/cargo_Information/del-cargo?Id="+num ,
            method: "post",
          }).then((res) => {
            console.log(res.data);
            if (res.data.meta == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败！");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑
    EditGoods(id) {
      this.axios
        .get(
          "https://localhost:44331/api/app/cargo_Information/full-cargo/"+id
        )
        .then((res) => {
          this.form = res.data.items;
        });
        this.$router.push("/Edit/Cargo_InformationEdit");
    },
    //查看
    CKGoods(id){
      this.dialogFormVisibleEdit == true;
      this.axios
        .get(
          "https://localhost:44331/api/app/cargo_Information/details/"+id
        )
        .then((res) => {
          this.ruleFormEdit = res.data.items;
        });
        this.$router.push("/Details/Cargo_InformationDetails");
    }
  },
};
</script>

<style scoped>
.table-grid-content {
  border-radius: 4px;
  height: 50px;
  background: #ebeef5;
  padding: 10px;
}
</style>